<script lang="ts" setup>
    const popupRef = ref<any>(null);

    const popupHandler = (type: string): void =>
    {
        popupRef.value.open({
            mode: type,
            data: {type: type, a: 1, b: 2}
        });
    };
</script>

<template>
    <!-- 弹出层 -->
    <u-layout
        :enable-refresh="false"
        title="弹出层组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <u-text text="基础功能" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                text="左侧打开弹窗"
                                @click="popupHandler('left')"
                            />
                        </view>
                    </view>

                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                text="右侧打开弹窗"
                                @click="popupHandler('right')"
                            />
                        </view>
                    </view>

                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                text="顶部打开弹窗"
                                @click="popupHandler('top')"
                            />
                        </view>
                    </view>

                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                text="底部打开弹窗"
                                @click="popupHandler('bottom')"
                            />
                        </view>
                    </view>

                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                text="居中打开弹窗"
                                @click="popupHandler('center')"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //弹出层 -->

    <u-popup
        ref="popupRef"
    >
        <view>
            哈哈哈哈
        </view>
    </u-popup>
</template>

<style lang="scss" scoped>
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;
                margin-top: 4px;

                .ui-block-control
                {
                    display: flex;
                    align-items: center;

                    .ui-block:not(:last-child)
                    {
                        margin-right: 30px;
                    }
                }
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>